<template>
	  <form class="mui-input-group">
		    <div class="mui-input-row">
			      <label class="tit">收件人</label>
			      <input v-model="form.name" type="text" class="mui-input-clear" placeholder="请输入收件人姓名">
			    </div>
		    <div class="mui-input-row">
			      <label class="tit">联系方式</label>
			      <input v-model="form.tel" type="text" class="mui-input-clear" placeholder="请输入手机号">
			    </div>
		    <div class="mui-input-row">
			      <label class="tit">所在地区</label>
			      <input v-model="form.area" type="text" class="mui-input-clear" placeholder="所在地区" @click="choose">
			   		  <div class="divwrap">
          <div class="mask" @click="choose" v-show="show"></div>
          <v-distpicker
            v-show="show"
            type="mobile"
            @province="onChangeProvince"
            @city="onChangeCity"
            @area="onChangeArea"
            :province="newInfo.province"
            :city="newInfo.city"
            :area="newInfo.district"
          >
          </v-distpicker>
        </div>
		</div>
		    <div class="mui-input-row">
			      <label class="tit">详细地址</label>
			      <input v-model="form.detail" type="text" class="mui-input-clear" placeholder="请输入详细地址">
			    </div>
		    <div class="mui-button-row">
			      <button @click="save" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认</button>
				<button v-show="id" @click="del" type="button" class="mui-btn mui-btn-danger mui-btn-block">删除</button>
			    </div>
		  </form>
</template>
<script>
	import VDistpicker from 'v-distpicker'
	export default {
		data() {
			return {
				form: {
					name: '',
					tel: '',
					area: '',
					detail: ''
				},
				show: false, // 是否显示遮罩层
				newInfo: {
					province: '', // 省
					city: '', // 市
					area: '', // 区
				}
			}
		},
		props: ['id'],
		created () {
		  this.getAddress()
		},
		methods: {
			save () {
			  this.$indicator.open({
			    text: '提交中'
			  })
			this.form.id = this.id
			  this.$http.post('address/save', this.form).then(res => {
			    this.$indicator.close()
				 if (res.data.code === 0) {
				    this.$toast(res.data.msg)
				  } else if (res.data.code === 1) {
				    this.$toast(res.data.msg)
				    this.$router.go(-1)
				  } else if (res.data.code === 2) {
				    this.$router.push({ name: 'login' })
				  }
			    window.console.log(res.data)
			  })
			},
			choose() {
				this.show = !this.show
			},
			onChangeProvince(data) {
				this.newInfo.province = data.value
			},
			onChangeCity(data) {
				this.newInfo.city = data.value
			},
			onChangeArea(data) {
				this.newInfo.area = data.value
				this.form.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.area
				this.show = false
			},
			  getAddress () {
			    if (!this.id) {
			      return
			    }
			    this.$indicator.open({
			      text: '加载中'
			    })
			    var params = { id: this.id }
			    this.$http.get('address/edit', { params: params }).then(res => {
			      this.$indicator.close()
			if (res.data.code === 0) {
			    this.$toast(res.data.msg)
			  } else if (res.data.code === 1) {
			    this.form = res.data.data
			  } else if (res.data.code === 2) {
			    this.$router.push({ name: 'login' })
			  }
			      window.console.log(res.data)
			    })
			  },
			 del () {
			    this.$indicator.open({
			      text: '删除中'
			    })
			    this.form.id = this.id
			    this.$http.post('address/del', this.form).then(res => {
			      this.$indicator.close()
				if (res.data.code === 0) {
				    this.$toast(res.data.msg)
				  } else if (res.data.code === 1) {
				    this.$toast(res.data.msg)
				    this.$router.go(-1)
				  } else if (res.data.code === 2) {
				    this.$router.push({ name: 'login' })
				  }
			      window.console.log(res.data)
			    })
			  }
		},
		components: {
			'v-distpicker': VDistpicker
		}
	}
</script>
<style lang="scss" scoped>
	  .mui-input-group .mui-button-row {
	    height: auto;
	  }
	  .mui-input-clear {
	    font-size: 14px;
	  }
	  .mui-input-group:before {
	    list-style: none;
	  }
	  .mui-button-row {
	    margin-top: 20px;
	    button {
	      margin: 20px 0;
	      padding: 10px 0;
	    }
	  }
	  .tit {
	    color: #999;
	  }
	  input::-webkit-input-placeholder {
	    color: #999;
	  }
	  input::-moz-placeholder {   /* Mozilla Firefox 19+ */
	    color: #999;
	  }
	  input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */
	    color: #999;
	  }
	  input:-ms-input-placeholder {  /* Internet Explorer 10-11 */
	    color: #999;
	  }
	  .divwrap > .mask {
	   background: #000;
	   opacity: 0.3;
	   position: fixed;
	   top: 0;
	   bottom: 0;
	   left: 0;
	   right: 0;
	  }
	  .divwrap > .distpicker-address-wrapper {
	   color: #999;
	   background: #fff;
	   border-top: 1px solid #ccc;
	   z-index: 1;
	   height: 300px;
	   overflow-y: auto;
	   position: fixed;
	   left: 0;
	   bottom: 0;
	   width: 100%;
	  }
</style>
